<template>
    <div class="personalBottom">
        <div class="contentLeft">
            <div class="person">
                <ul>
                    <li>
                        <p>关注</p>
                        <p>0</p>
                    </li>
                    <li class="middle">
                        <p>粉丝</p>
                        <p>0</p>
                    </li>
                    <li>
                        <p>获赞</p>
                        <p>0</p>
                    </li>
                </ul>
                <p class="registerTime">
                    注册时间：2021-9-25
                </p>
            </div>
        </div>
        <div class="contentRight">
            <div class="evaluate clearFix">
                <h3>评价</h3>
                <p>
                    哪家店特别让你满意？那家店让你深恶痛绝？写封评价记录一下，顺便还能告诉更多人知道哦！
                </p>
                <button @click="toSearch">写评价</button>
            </div>
            <div class="pic clearFix">
                <h3>图片</h3>
                <p>
                    无论是摄影粉，还是验毒派，还原现场分享给更多人是最大滴美德啊~一句话，有图有真相！
                </p>
            </div>
            <div class="strategy clearFix">
                <h3>攻略</h3>
            </div>
            <div class="signin clearFix">
                <h3>签到</h3>
                <p>
                    人的一生，看过很多风景，遇见过很多人~用签到随时记录自己去过的地方。<br>
                    怎么玩签到？<a href="www.dianping.com/help/faq">www.dianping.com/help/faq</a>
                </p>
            </div>
            <div class="invitation clearFix">
                <h3>
                    帖子
                </h3>
                <p>
                    社区就是资深dpers的大本营，谈美食、聊游记、扯八卦、抢赠品~快去社区发个处女帖
                </p>
                <button>发帖子</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'term',
        data(){
            return {
                
            }
        },
        
        methods:{
            //跳转到搜索页
            toSearch(){
                this.$router.push('/search')
            }
        }
    }
</script>

<style lang="css" scoped>
.personalBottom{
    width:980px;
    height: 500px;
    margin-top: 20px;
}
.personalBottom .contentLeft{
    width: 240px;
    height:100%;
    background-color: #fff;
    float: left;
    margin-right: 10px;
}
.personalBottom .contentLeft .person{
    width:100%;
    background-color: #fff;
    padding: 20px 0;
    border-bottom: 1px dashed #D5F1FC;
}
.personalBottom .contentLeft .person ul{
    display: flex;
    justify-content:space-evenly
}
.personalBottom .contentLeft .person ul .middle{
    border-left: 1px dashed #EAEAEA;
    border-right: 1px dashed #EAEAEA;
    margin-bottom: 20px;
}
.personalBottom .contentLeft .person ul li{
    padding: 0 25px;
    text-align: center;
    line-height:20px;
}
.personalBottom .contentLeft .person .registerTime{
    line-height: 50px;
    border-top: 1px dashed #D5F1FC;
    width: 80%;
    margin-left: 25px;
}
.personalBottom .contentRight{
    width: 710px;
    height:100%;
    background-color: #fff;
    float: right;
}
.personalBottom .contentRight div{
    padding: 30px 20px;
    border-bottom: 1px dashed #D5F1FC;
}
.personalBottom .contentRight div h3{
    font-size: 18px;
    float: left;
    margin-left: 20px;
}
.personalBottom .contentRight div p{
    float: left;
    margin:4px 0 0 30px;
    height: 10px;
}
.personalBottom .contentRight div button{
    padding: 0 5px;
    float: right;
    margin-right: 10px;
}
</style>